<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title> 属性选择器 </title>
  <style type="text/css">
  /* 对所有 div 元素都起作用的 css 样式 */
  div {
    width: 300px;
    height: 30px;
    background-color: #eee;
    border: 1px solid black;
    padding: 10px;
  }

  /* 对有 id 属性的 div 元素起作用的 CSS 样式 */
  div[id] {
    background-color: #aaa;
  }

  /* 对有id属性值包含xx的div元素起作用的css样式 */
  div[id*=xx] {
    background-color: #999;
  }

  /* 对有id属性值以xx开头的div元素起作用的css样式 */
  div[id^=xx] {
    background-color: #555;
    color: #fff;
  }

  /* 对有id属性值等于xx的div元素起作用的css样式 */
  div[id=xx] {
    background-color: #111;
    color: #fff;
  }
  </style>
</head>

<body>
<div>没有任何属性的div元素</div>
<div id="a">带id属性的div元素</div>
<div id="zzxx">id属性值包含xx子字符串的div元素</div>
<div id="xxyy">id属性值以xx开头的div元素</div>
<div id="xx">id属性值为xx的div元素</div>
</body>
</html>
